<template>
  <div class="product-item">
    <div class="product-left">
      <img src="@/assets/矩形 2.png" />
      <!-- <img :src="productItem.src" /> -->
    </div>
    <!-- 右上方文本 -->
    <div class="text">
      <div class="titel ele fz14">
        {{ productItem.name }}
      </div>
      <!-- 规格 -->
      <span class="specification fz12">瓶装 </span>
      <span class="specification fz12 right">云仓库存:34</span>
      <div class="info">
        <span class="fz14">￥{{ productItem.price }} </span>
        <span class="number">
          <span class="supplement fz12">补货数量</span>
          <van-stepper
            v-model="quantity"
            input-width="20rpx"
            button-size="20rpx"
          />
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cloudItem',
  props: ['productItem'],
  //   props: {
  //     // 带有默认值的对象
  //     productItem: {
  //       type: Object,
  //       default: {},
  //     },
  //   },
  data() {
    return {
      radio: 0,
      quantity: 0
    }
  }
}
</script>

<style lang="less" scoped>
.product-item {
  margin-bottom: 12px;
  border-radius: 8px;
  padding: 12px 0;
  width: 351px;
  height: 114px;
  display: flex;

  .product-left {
    margin-right: 12px;
    width: 90px;
    height: 90px;
    object-fit: cover;
    img {
      width: 100%;
      height: 90px;
    }
  }
  .text {
    // float: left;
    // vertical-align: center;
    position: relative;
    height: 24px;
    width: 225px;
    .titel {
      width: 225px;
      height: 20px;
      font-weight: 400;
      line-height: 20px;
    }
    .specification {
      position: absolute;
      top: 28px;
      left: 0;
      height: 18px;
      line-height: 18px;
      background: #f7f6fb;
      border-radius: 4px;
      text-align: center;
      color: #665e75;
      padding: 0 8px;
    }
    .right {
      position: absolute;
      top: 28px;
      left: auto;
      right: 0;
      background: #fff;
    }
    .info {
      position: absolute;
      top: 70px;
      width: 225px;
      height: 24px;
      //   color: #ff6400;
      //   overflow: hidden;
      font-weight: 600;
      text-align: end;
      .fz14 {
        float: left;
        color: #ff6400;
      }
      .number {
        float: right;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        // .supplement {
        //   color: #665e75;
        //   font-size: 12px;
        // }
      }
      //   .number {
      //     display: inline-block;
      //     width: 170px;
      //     position: absolute;
      //     .supplement {
      //       color: #665e75;
      //       font-size: 12px;
      //     }
      //     .van-stepper {
      //       position: absolute;
      //       bottom: 0;
      //       right: 0;
      //     }
      //   }
    }
  }
}
</style>
